<meta http-equiv="Access-Control-Allow-Origin" content=" http://localhost:8080/
">

<template>
  <div>
    <!--  1-->
    <div>
      <van-search
          v-model="value"
          placeholder="热辣火锅季"
          input-align="center"
      />
    </div>
    <div>
      <van-tabs v-model:active="active">
        <van-tab title="精选">


        </van-tab>
        <van-tab title="家常菜"></van-tab>
        <van-tab title="视频菜谱"></van-tab>,`
        <van-tab  title="小技巧"></van-tab>
        <van-tab title="更多"></van-tab>
      </van-tabs>
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <van-image
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F16%2F11%2F18%2Fa3628f51813d9d35be34aa3345957f97.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659172785&t=f8a2c555204e14a0cc11021d3489921b"

          />
          <label>小龙虾</label>
        </van-grid-item>
        <van-grid-item>
          <van-image
              src="https://img1.baidu.com/it/u=191459933,2483120721&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1656694800&t=d9302dca45f6030d8adfc991c72408cb"
          />
          <label>韩式美食</label>
        </van-grid-item>

      </van-grid>
    </div>
    <div class="div1">
      <div>
        <label>叮咚直播</label>
      </div >
      <div class="div2">
        <van-card
            price="29.98"
            desc="看直播卖爆款"
            title="看直播卖爆款，提前点关注，开播不送路！"
            thumb="https://img1.baidu.com/it/u=2565358841,1265505192&fm=253&fmt=auto&app=138&f=PNG?w=500&h=245"

        >
          <template #tags>
            <van-tag plain >
              <img class="img1" src="https://img0.baidu.com/it/u=99552758,3625284495&fm=253&fmt=auto&app=138&f=JPEG?w=777&h=500">
            </van-tag>
          </template>
        </van-card>
      </div>
    </div>
    <div v-for="f in eatfoods">
      <van-cell title="午后解乏"  value="换一批" >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="replay" style="margin-right:10px" @click="start(f.fid)" />
        </template>
      </van-cell>

    </div>
    <div >
      <van-row justify="space-around">
        <van-col span="4">早餐</van-col>
        <van-col span="4">午餐</van-col>
        <van-col span="4">下午茶</van-col>
        <van-col span="4">晚餐</van-col>
        <van-col span="4">夜宵</van-col>
      </van-row>
      <div v-for="f in eatfoods">
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image
                :src="f.photo"
            />
            <div>
              <label class="lb1">{{f.name}}</label>
              <van-divider />
              <label class="lb2">{{f.level}}|{{f.minute}}分钟以上</label>
            </div>
          </van-grid-item>
          <van-grid-item>
            <van-image
                :src="f.photo"
            />
            <div>
              <label class="lb1">{{f.name}}</label>
              <van-divider />
              <label class="lb2">{{f.level}}|{{f.minute}}分钟以上</label>
            </div>
          </van-grid-item>
          <van-grid-item>
            <van-image
                :src="f.photo"
            />
            <div>
              <label class="lb1">{{f.name}}</label>
              <van-divider />
              <label class="lb2">{{f.level}}|{{f.minute}}分钟以上</label>
            </div>
          </van-grid-item>
        </van-grid>

      </div>
    </div>
    <div class="div3">

      <div>
        <van-icon name="fire-o" /><label>精选菜谱</label>
      </div>
      <van-divider />
      <div v-for="m in eatmenus">
        <van-grid :border="false" :column-num="2">
          <van-grid-item>
            <van-image
                :src="m.photo"
            />
            <div>
              <label class="lb11">{{m.name}}</label><br>
              <label class="lb12">难度{{m.level}}|{{m.grade}}分</label><br>
              <label class="lb13">{{m.type}}</label>
            </div>
          </van-grid-item>
          <van-grid-item>
            <van-image
                :src="m.photo"
            />
            <div>
              <label class="lb11">{{m.name}}</label><br>
              <label class="lb12">难度{{m.level}}|{{m.grade}}分</label><br>
              <label class="lb13">{{m.type}}</label>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EatView",
  data(){
    return{
      active:0,

      eatfoods:[
        {
          fid:"",
          name:"",
          level:"",
          minute:"",
          photo:""

        }
      ],
      eatmenus:[
        {
          name:"",
          level:"",
          grade:"",
          type:"",
          photo:""


        }
      ],
    }
  },
  methods:{

    start(){
      //根据类型 选择


      //请求接口
      this.axios.get("/eatfood/all.do?id=2").then(r=>{
        if(r.data.code==200){
          console.log(r.data)
          //
          this.eatfoods=r.data.data;
        }
      })
    }
  },mounted() {
    //请求接口
    this.axios.get("/eatfood/all.do?id=1").then(r=>{
      if(r.data.code==200){
        console.log(r.data)
        //
        this.eatfoods=r.data.data;
      }
    }),
        //请求接口
        this.axios.get("/eatmenu/all.do").then(r=>{
          if(r.data.code==200){
            console.log(r.data)
            //
            this.eatmenus=r.data.data;
          }
        })
  }
}
</script>

<style scoped>

.img1{
  width: 100%;
  height: 80px;

}
.div2{
  width: 100%;
  height: 180px;
}
.lb1{
  color: black;
  background-color: salmon;
  margin-left: 10px;
}
.div3{
  width: 100%;
  height: 100%;
}
.lb2{
  color:slategrey;
  font-size: 0.32rem;
}
.lb11{
  margin-left: 1px;


}
.lb12{
  color: slategrey;
}
</style>